Day29 Vuex Getter用法介紹

第 11 屆 iThome 鐵人賽

DAY 29

自我挑戰組

前端新手筆記-Vue.js系列第 29 篇

11th鐵人賽 vuex vue學習筆記

chunwen

2019-10-15 23:11:07

2362 瀏覽

分享至

前言

今天要介紹的Getter，我們其實可以把它想像成Vue中的computed屬性。OK，那我們就開始吧！

Vuex Getter 介紹

使用時機：
昨天我們介紹到 state 是存放元件共同維護的資料，而今天假設我們要對資料進行運算、過濾，過去我們在 Vue 中很直覺就會想到要用 computed 。但在不同元件間，這些過濾資料能否跟 state 一樣，一起被共享維護呢？

答案是可以的！而這也是Vuex Getter存在的目的！這時我們來看官網提供的範例，就能清楚了解到getter 的方便地方勒～

Vuex 使用方式

範例1：未使用getter作法

Javascript部分程式碼

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

我們可以發現，上面範例是透過 computed 取得 store 中 todo 的相關資料，這時候我們假設我們有多個元件需要用到此屬性，是否就要重複撰寫呢？~~(有點蠢)~~
所以這就要用到 Getter 來幫助我們解決這問題！

範例2：使用getter作法

state 作為第一個參數、getters 可以作為第二個參數

Javascript部分程式碼

//創建一個store
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, 
        text: 'hello', 
        done: true 
       },
      { id: 2, 
        text: 'hello2', 
        done: false 
      }
    ]
  },
  getters: {
    doneTodos: state => {        //state 作為第一個參數
      return state.todos.filter(todo => todo.done)
    },
    doneTodosCount: (state, getters) => {//getters 可以作為第二個參數
      return getters.doneTodos.length
    },
  }
})

我們在元件中即可以下面方式來取得 doneTodos ：

//第一個參數
computed: {
  doneTodos() {
    return this.$store.getters.doneTodos;
  },
}
// [ { "id": 1, "text": "hello", "done": true } ]

//第二個參數
computed: {
  doneTodosCount() {
    return this.$store.getters.doneTodosCount
  },
}
// 1

範例3：使用getter作法(返回函數)

我們也可以傳參數到 getters 來取得返回結果，這是非常便利的方式查詢 store 中的陣列。
Javascript部分程式碼

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'hello', done: true },
      { id: 2, text: 'hello2', done: false }
    ]
  },
  getters: {
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id)
    }
  }
})
computed: {
  getTodoById() {
    return this.$store.getters.getTodoById(2);
  }
}

// { "id": 2, "text": "hello2", "done": false }

mapGetters 輔助函數

mapGetters 與 mapState 用法相近

<template>
  <div>
    <div>{{doneTodos}}</div>
    <div>{{doneTodosCount}}</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    mapGetters([
      'doneTodos',
      'doneTodosCount',
    ]),
  },
};
</script>